/** @jsxImportSource @emotion/react */
import * as React from "react";
import {RepLink, ReportViewProps,} from "../../common/base";
import {末尾链接, } from "../../common/rarelyVary";
import {Table, TableBody, Text, useTheme} from "customize-easy-ui-component";
import {ReportFirstPageHeadCyMa} from "../../valve/rarelyVary";
import {config证书概要} from "./Regular.O-1";
import {useTwoColumnView} from "../../hook/useThreeColumnSubr";
import {ConclusionValvVw} from "../offline/viewRes";
import {DirectLink} from "../../../routing/Link";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    // const [rootMenu]=useRepMenuDirItems(VsProjects默认, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
  return (
    <React.Fragment>
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
          <CertificatePage orc={orc} rep={rep}/>
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
    const theme= useTheme();
    const [firstNode,secondNode,]=useTwoColumnView({orc, config:config证书概要,slash:true,split:[2,13],});
    const callback = () => {
        return <div  css={{"@media print": {height:'100vh', overflowY: 'hidden',} }}>
            { ReportFirstPageHeadCyMa({theme,rep, mbbm:'FJB/RA-1022-0-2016'}) }
            <div css={{
                "@media print": {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-around',
                    height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
                }
            }}>
                <Text variant="h3" css={{textAlign:'center',lineHeight:'0.8', "@media print": {fontSize: theme.fontSizes[5],},}}>
                    安全阀在线检测报告
                </Text>
                <div css={{"@media print": {minHeight: '85vh'}}}>
                    <div css={{display: 'flex', justifyContent: 'space-between',}}>
                        安全阀出厂编号：{orc?.出厂编号}
                        <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'}}>报告编号：{rep.isp?.no}</Text>
                    </div>
                    <Table fixed={["12.1%", "53.1%", "8.1%", "%"]} css={{borderCollapse: 'collapse',}} tight
                           miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag={'CertificateSummary'}>
                                {firstNode}
                            </RepLink>
                        </TableBody>
                    </Table>
                    <Table fixed={["12.1%", "39%", "14.1%", "%"]} css={{borderCollapse: 'collapse',}} tight miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag={'CertificateSummary'}>
                                {secondNode}
                            </RepLink>
                        </TableBody>
                    </Table>
                    <ConclusionValvVw orc={orc} rep={rep} cap={'校验'}/>
                </div>
            </div>
        </div>
    }
    // const [renderAll]=useFolder(callback,'检验证书折叠',false);
    return <>
        <div id="Certificate"/>
        {callback()}
    </>;
};
